<template>
	<!-- 案件 -->
	<view class="page">
		<myNavBar title="案件" rightText="新建案件" @clickRight='clickRight'></myNavBar>
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
			activeColor="#1989FA"></uni-segmented-control>
		<view class="content">
			<scroll-view class="list" scroll-y="true">
				<view class="citem" v-for="item of caseList" :key="item">
					<view class="cileft">
						<image class="ciimg" src="../../static/case/lcase.png" mode=""></image>
					</view>
					<view class="ciright">
						<view class="cirtop">
							<view class="">
								{{ item.caseName }}
							</view>
							<view class="status">
								<!-- 状态 -->
								{{ item.processstep }}
							</view>
							<view class="openBox">
								<text class="open" @click="openCase(item)">
									打开
								</text>
							</view>
						</view>
						<view class="cirbottom1">
							<view class="cir1left">
								<image class="cirimage" src="../../static/emoji/8.gif" mode=""></image>
								<view class="">
									{{ item.user }}
								</view>
							</view>
							<view class="cir1right">
								{{ item.createTime }}
							</view>
						</view>

						<view class="cirbottom2">
							<view class="xieban" @click="zhifu">
								<image src="../../static/case/person.png" mode=""></image>
								支付
							</view>
							<view class="xieban" @click="xieban">
								<image src="../../static/case/person.png" mode=""></image>
								协办
							</view>
							<view class="edit" @click="editCase(item)">
								<image src="../../static/case/edit.png" mode=""></image>
								编辑
							</view>
							<view class="delete" @click="deleteCase">
								<image src="../../static/case/delete.png" mode=""></image>
								删除
							</view>
						</view>
					</view>

				</view>
			</scroll-view>
			<uni-load-more :status="status" :content-text="contentText" />
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			caseList: [],
			items: ['全部', '我创建', '我参与'],
			current: 0,
			pagination: {
				currentPage: 1,
				pageSize: 4,
			},
			status: 'more',
			contentText: {
				contentdown: '查看更多',
				contentrefresh: '加载中',
				contentnomore: '没有更多'
			},
		}
	},
	onShow() {
		this.getCaseList();
	},
	//下拉刷新
	onPullDownRefresh() {
		this.pagination.currentPage = 1;
		uni.stopPullDownRefresh();
		this.caseList = [];
		this.getCaseList()
	},
	//上拉加载
	onReachBottom() {
		if (this.status == 'noMore') {
			return;
		}
		this.pagination.currentPage++;
		this.getCaseList();
	},
	methods: {
		getCaseList() {
			let url = `/case/list?isCreate=${this.current}&lowyer=${uni.getStorageSync("lowyer")}&page=${this.pagination.currentPage}&size=${this.pagination.pageSize}`;
			if (this.current == 0) {
				url = `/case/list?lowyer=${uni.getStorageSync("lowyer")}&page=${this.pagination.currentPage}&size=${this.pagination.pageSize}`;
			}
			this.$httpRequest({
				url: url,
				method: 'GET',
			}).then(res => {
				console.log('list==============>', res);
				this.caseList = res.data;
				if (this.pagination.currentPage === 1) {
					this.caseList = res.data;
				} else {
					this.caseList = this.caseList.concat(res.data);
				}
				// 判断是否还有更多数据
				if (res.data.length < this.pagination.pageSize) {
					this.status = 'noMore'; // 没有更多数据
				} else {
					this.status = 'more'; // 还有更多数据
				}
			})
		},
		openCase(item) {
			uni.showModal({
				title: '确认要打开此案件吗?',
				success: (res) => {
					if (res.confirm) {
						uni.navigateTo({
							url: `/pages/group/case-detail?id=${item.id}`,
						});
					}
				}
			});
		},
		deleteCase() {
			uni.showModal({
				title: '确认要删除此案件吗?',
				success: (res) => {
					if (res.confirm) { }
				}
			});
		},
		onClickItem(e) {
			if (this.current != e.currentIndex) {
				this.current = e.currentIndex;
				this.getCaseList();
			}
		},
		editCase(item) {
			uni.navigateTo({
				url: `/pages/group/case-edit?id=${item.id}`,
			});
		},
		clickRight() {
			uni.navigateTo({
				url: '/pages/group/case-edit',
			});
		},
		xieban() {
			uni.navigateTo({
				url: "/pages/group/case-xieban?id=4",
			});
		},
		zhifu() {
			uni.requestPayment({
				"provider": "wxpay",
				"orderInfo": {
					"appid": "wx499********7c70e",  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
					"noncestr": "c5sEwbaNPiXAF3iv", // 随机字符串
					"package": "Sign=WXPay",        // 固定值
					"partnerid": "148*****52",      // 微信支付商户号
					"prepayid": "wx202254********************fbe90000", // 统一下单订单号
					"timestamp": 1597935292,        // 时间戳（单位：秒）
					"sign": "A842B45937F6EFF60DEC7A2EAA52D5A0" // 签名，这里用的 MD5/RSA 签名
				},
				success: e => {
					console.log("支付成功")
				},
				fail: err => {
					if (err.errMsg.indexOf('取消') > -1 || err.errMsg.indexOf('cancel') > 1 || err.errMsg.indexOf('-2') > -1) {
						console.log('取消支付');
					} else {
						console.log('支付遇到错误，请稍候重试');
						console.log(err);
					}
				}
			})
		},
	}

}
</script>

<style lang="scss" scoped>
.page {
	overflow-y: hidden;
}

::v-deep .segmented-control__text {
	font-size: 25rpx;
}

.content {

	margin-top: 20rpx;
	background-color: #fff;

	height: calc(100% - 120px);
	overflow-y: scroll;

	.citem {
		border: 1px solid rgb(234, 239, 244);
		display: flex;

		.cileft {
			flex: 1;
			position: relative;

			.ciimg {
				position: absolute;
				right: 20rpx;
				top: 40rpx;
				width: 50rpx;
				height: 50rpx;
			}
		}

		.ciright {
			flex: 5;

			.cirtop {
				height: 90rpx;
				display: flex;
				align-items: center;

				& view {
					flex: 1;
					display: flex;
					font-size: 30rpx;
				}

				.status {
					font-size: 26rpx;
					color: #FF9C27;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.openBox {
					display: flex;
					justify-content: center;
					align-items: center;

					.open {
						color: #fff;
						background-color: #1989FA;
						font-size: 28rpx;
						padding: 5rpx 15rpx;
					}
				}

			}

			.cirbottom1 {
				height: 60rpx;
				font-size: 26rpx;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;

				.cir1left {
					flex: 1;
					display: flex;
					align-items: flex-start;
					height: 100%;
				}

				.cir1right {
					margin-right: 20rpx;
				}

				.cirimage {
					height: 30rpx;
					width: 30rpx;
					border-radius: 50%;
					margin-right: 10rpx;
				}
			}

			.cirbottom2 {
				font-size: 26rpx;
				display: flex;
				justify-content: flex-end;

				.xieban,
				.edit,
				.delete {
					background-color: rgb(238, 243, 247);
					padding: 5rpx 10px;
					margin: 20rpx 20rpx;
					border-radius: 10rpx;
				}

				& image {
					width: 20rpx;
					height: 20rpx;
				}
			}
		}

	}
}
</style>